<template>
  <l-layout class="l-tab-page">
    <l-panel title="基本穿梭框">
      <el-form
        :model="formData"
        :rules="rules"
        size="mini"
        labelPosition="#toolRight"
        labelWidth="80px"
        ref="ruleForm"
      >
        <div class="l-auto-window only-tabs">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane
              class="l-tabs-container"
              :label="$t('新增采购申请单')"
              name="tab0"
            >
              <el-row :gutter="5">
                <div class="l-rblock pd-16">
                  <el-col :span="8">
                    <el-form-item :label="$t('单据编码')" prop="f_PurchaseNo">
                      <el-input
                        v-model="formData.f_PurchaseNo"
                        :placeholder="$t('请输入')"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      :label="$t('主题')"
                      prop="f_Theme"
                      :required="true"
                    >
                      <el-input
                        v-model="formData.f_Theme"
                        :placeholder="$t('请输入')"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      :label="$t('采购类别')"
                      prop="f_PurchaseType"
                    >
                      <l-select
                        :options="f_PurchaseTypeOptions"
                        v-model="formData.f_PurchaseType"
                      ></l-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      :label="$t('申请日期')"
                      prop="f_ApplyDate"
                    >
                      <l-date
                        format="yyyy-MM-dd HH:mm:ss"
                        dateType="datetime"
                        :clearable="true"
                        v-model="formData.f_ApplyDate"
                        :placeholder="$t('请选择')"
                      >
                      </l-date>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      :label="$t('申请人')"
                      prop="f_Appler"
                    >
                      <l-user-select
                        v-model="formData.f_Appler"
                      ></l-user-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item
                      :label="$t('申请单位')"
                      prop="f_Department"
                    >
                      <l-company-select
                        v-model="formData.f_Department"
                      ></l-company-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item :label="$t('附件上传')" prop="f_File">
                      <l-upload v-model="formData.f_File"> </l-upload>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item :label="$t('备注信息')" prop="f_Description">
                      <el-input
                        type="textarea"
                        :rows="3"
                        v-model="formData.f_Description"
                        :placeholder="$t('请输入')"
                      >
                      </el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item :label="$t('参与人员')" prop="f_Person">
                      <el-transfer
                        v-model="formData.f_Person"
                        :data="transferData"
                      ></el-transfer>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24" class="bottomButton">
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')"
                        >验证表单</el-button
                      >
                      <el-button @click="resetForm('ruleForm')"
                        >重置表单</el-button
                      >
                    </el-form-item>
                  </el-col>
                </div>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form>
    </l-panel>
  </l-layout>
</template>
<script>
export default {
  data() {
    return {
      activeName: "tab0",
      formData: {
        f_PurchaseNo: "", // 单据编码
        f_Theme: "", // 主题
        f_PurchaseType: "", // 采购类别
        f_ApplyDate: "", // 申请日期
        f_Appler: "", // 申请人
        f_Department: "", // 申请单位
        f_File: "", // 附件上传
        f_Description: "", // 备注
        f_ModifyDate: "", // 修改时间
        f_ModifyUserName: "", // 修改人员
        f_Person: [], // 参与人员
      },

      // 验证规则
      rules: {
        f_PurchaseNo: [{ required: true, message: "请输入单据编码" }],
        f_Theme: [{ required: true, message: "请输入主题" }],
        f_PurchaseType: [{ required: true, message: "请选择采购类别" }],
        f_ApplyDate: [{ required: true, message: "请选择申请日期" }],
        f_Appler: [{ required: true, message: "请选择申请人" }],
        f_Department: [{ required: true, message: "请选择申请单位" }],
        f_Person: [{ required: true, message: "请选择参加人员" }],
      },
    };
  },
  computed: {
    f_PurchaseTypeOptions() {
      return [
        { value: "2", label: "新闻类" },
        { value: "3", label: "产品类" },
        { value: "4", label: "信息类" },
      ];
    },
    transferData() {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `参与人${i}`,
          disabled: i % 5 === 0,
        });
      }
      return data;
    },
  },
  methods: {
    // 验证表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: this.$t("表单验证成功!"),
          });
        } else {
          return false;
        }
      });
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
